<div class="mock-item-value mock-item-editor">
    <!-- collection -->
    <ng-container *ngIf="item.type === 3">
        <ng-container *ngIf="item.mockType==0">
            <input type="number" class="input input-lean" min="1" max="100" [(ngModel)]="item.mockValueStart" #startInput #focusInput (change)="checkListItem()" (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, startInput)" placeholder="循环次数" />
        </ng-container>
        <ng-container *ngIf="item.mockType==1">
            <input type="number" class="input input-lean" min="0" [(ngModel)]="item.mockValueStart" #startInput #focusInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="起始值" /> ~
            <input type="number" class="input input-lean" min="1" max="100" [(ngModel)]="item.mockValueEnd" #endInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="结束值" />
        </ng-container>
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">固定循环次数</option>
            <option [ngValue]="1">随机循环次数</option>
        </select>
        <label *ngIf="item.mockType==0 && item.mockValueStart > 1" class="ml-1">
            <input type="checkbox" [checked]="item.mockListLoopStructCreated" [(ngModel)]="item.mockListLoopStructCreated" (change)="listLoopStructCreate()"> 各元素独立
        </label>
    </ng-container>

    <!-- 基础类型 - 数值类型 -->
    <ng-container *ngIf="item.baseType === 0">
        <input type="number" class="input input-lean" #startInput #focusInput *ngIf="item.mockType==0" [(ngModel)]="item.value" (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, startInput)"/>
        <ng-container *ngIf="item.mockType==1">
            <input type="number" class="input input-lean" [(ngModel)]="item.mockValueStart" #startInput #focusInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="起始值" /> ~
            <input type="number" class="input input-lean" [(ngModel)]="item.mockValueEnd" #endInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="结束值" />
        </ng-container>
        <ng-container *ngIf="item.mockType==2">
            <textarea class="input mock-random-values float-left" #startInput #focusInput [(ngModel)]="listBatchEditor"></textarea>
        </ng-container>
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">固定值</option>
            <option [ngValue]="1">某个范围内随机</option>
            <option [ngValue]="2">给定数值中随机</option>
        </select>
    </ng-container>


    <!-- 基础类型 - 字段串 -->
    <ng-container *ngIf="item.baseType === 1">
        <input type="text" *ngIf="item.mockType==0" class="input input-lean" #focusInput #startInput [(ngModel)]="item.value"  (keydown.escape)="cancel()" (keyup.enter)="checkRangeStringInput(startInput)"/>
        <textarea *ngIf="item.mockType==1" #focusInput [(ngModel)]="item.value" class="input mock-random-values" ></textarea>
        <textarea *ngIf="item.mockType==2" #focusInput [(ngModel)]="listBatchEditor" class="input mock-random-values" ></textarea>
        <ng-container *ngIf="item.mockType==3">
            <table class="table">
                <ng-container *ngFor="let li of item.mockValueRandomList; let index=index;">
                    <tr *ngIf="editRandomListIndex!==index">
                        <td class="position-relative list-item" (click)="editItem(index)">
                            {{(li.length === 0 ? '--空内容，点击编辑--' : li) | subString:23}}
                            <div class="ops position-right">
                                <button class="btn lean-btn" (click)="deleteItem(index)">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr *ngIf="editRandomListIndex===index">
                        <td>
                            <textarea class="input-lean mock-random-values" (keyup.escape)="cancelItem()" #randomListItemEditor [(ngModel)]="itemValue"></textarea>
                            <div class="align-right">
                                <button class="btn lean-btn primary-btn" (click)="saveItem()">确定</button>
                                <button class="btn lean-btn" (click)="cancelItem()">取消</button>
                            </div>
                        </td>
                    </tr>
                </ng-container>
                <tr *ngIf="editRandomListIndex === -1">
                    <td class="align-right">
                        <button class="btn lean-btn primary-btn"  (click)="addItem()">添加</button>
                    </td>
                </tr>
            </table>
        </ng-container>
        <ng-container *ngIf="item.mockType==4">
            <input type="number" class="input input-lean" min="0" max="1000" [(ngModel)]="item.mockValueStart" #startInput #focusInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="起始值" /> ~
            <input type="number" class="input input-lean" min="1" max="1000" [(ngModel)]="item.mockValueEnd" #endInput (keydown.escape)="cancel()" (keydown.enter)="checkRangeNumberInput(startInput, endInput)" placeholder="结束值" />
        </ng-container>
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">指定值-单行</option>
            <option [ngValue]="1">指定值-多行</option>
            <option [ngValue]="2">备选中随机-单行</option>
            <option [ngValue]="3">备选中随机-多行</option>
            <option [ngValue]="4">随机N个字符串</option>
        </select>
    </ng-container>


    <!-- 基础类型 - 布尔值 -->
    <ng-container *ngIf="item.baseType === 2">
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">true</option>
            <option [ngValue]="1">false</option>
            <option [ngValue]="2">随机</option>
        </select>
    </ng-container>


    <!-- 基础类型 - Byte -->
    <ng-container *ngIf="item.baseType === 3">

    </ng-container>


    <!-- 基础类型 - 日期 -->
    <ng-container *ngIf="item.baseType === 4">
        <input type="text" *ngIf="item.mockType==0" class="input input-lean input-date-time" #focusInput #startInput [(ngModel)]="item.value"  (keydown.escape)="cancel()" (keyup.enter)="checkRangeStringInput(startInput)"/>

        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">固定值</option>
            <option [ngValue]="1">当前时间</option>
        </select>
    </ng-container>


    <!-- 基础类型 - 枚举 -->
    <ng-container *ngIf="item.baseType === 5">
        <select *ngIf="item.mockType===0" [(ngModel)]="item.value">
            <option *ngFor="let enumValue of item.mockValueRandomList" [ngValue]="enumValue">{{enumValue}}</option>
        </select>
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">固定值</option>
            <option [ngValue]="1">随机枚举值</option>
        </select>
    </ng-container>


    <!-- char -->
    <ng-container *ngIf="item.baseType === 6">
        <input type="text" *ngIf="item.mockType==0" maxlength="1" class="input input-lean input-char" #focusInput #startInput [(ngModel)]="item.value"  (keydown.escape)="cancel()" (keyup.enter)="checkRangeStringInput(startInput)"/>
        <select [(ngModel)]="item.mockType" (change)="focus()">
            <option [ngValue]="0">固定值</option>
            <option [ngValue]="1">随机值</option>
        </select>
    </ng-container>

    <!-- Map -->
    <ng-container *ngIf="item.type === 4">
        map key: <input type="text" class="input input-lean input-char" #focusInput #startInput [(ngModel)]="mapKey"  (keydown.escape)="cancel()" (keyup.enter)="checkRangeStringInput(startInput)"/>
    </ng-container>

    <div class="opts">
        <button class="btn primary-btn lean-btn" (click)="save()">保存</button>
        <button class="btn lean-btn" (click)="cancel()">取消</button>
    </div>
</div>
